<template>
  <el-dialog class="checkDialog" :visible.sync="show" center fullscreen @opened="init" :before-close="close"
             :show-close="false"
  >

    <template slot="title">
      <div style="position: relative;height: 40px;line-height: 40px">
        <div class="title">{{ orderName + '-' + getTypeName(orderTypeId) }}</div>
        <div style="position: absolute;top:0;right: 20px">
          <el-button icon="el-icon-refresh" size="small" @click="init">刷新</el-button>
          <el-button icon="el-icon-circle-close" type="primary" size="small" @click="close">关闭</el-button>
        </div>
      </div>
    </template>
    <el-tabs v-model="submitType" type="card">
      <el-tab-pane :label="getStatusLabel('WAIT_CHECK')" name="WAIT_CHECK">
        <check-table ref="table_WAIT_CHECK" :table-data="tableData" @search="getList"
                     :media-install-type="orderTypeStr"
                     worker-submit-status="WAIT_CHECK" :current-worker-submit-status="submitType"
        ></check-table>
      </el-tab-pane>
      <el-tab-pane :label="getStatusLabel('PASS')" name="PASS">
        <check-table ref="table_PASS" :table-data="tableData" @search="getList" :media-install-type="orderTypeStr"
                     worker-submit-status="PASS" :current-worker-submit-status="submitType"
        ></check-table>
      </el-tab-pane>
      <el-tab-pane :label="getStatusLabel('NOT_PASS')" name="NOT_PASS">
        <check-table ref="table_NOT_PASS" :table-data="tableData" @search="getList"
                     :media-install-type="orderTypeStr"
                     worker-submit-status="NOT_PASS" :current-worker-submit-status="submitType"
        ></check-table>
      </el-tab-pane>
      <el-tab-pane :label="getStatusLabel('MULTI_SUBMIT')" name="MULTI_SUBMIT">
        <check-table ref="table_MULTI_SUBMIT" :table-data="tableData" @search="getList"
                     :media-install-type="orderTypeStr" worker-submit-status="MULTI_SUBMIT"
                     :current-worker-submit-status="submitType"
        ></check-table>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" size="mini">关闭</el-button>
    </span>
    <el-backtop target=".checkDialog .el-dialog.is-fullscreen.el-dialog--center"></el-backtop>
  </el-dialog>
</template>

<script>
import { check_list, status_count } from '@/api/workOrder/workSubmit'
import checkTable from './checkTable'

export default {
  name: 'orderCheckDialog',
  components: {
    checkTable
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: Number,
      default: 0
    },
    orderName: {
      type: String,
      default: ''
    },
    orderTypeId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      submitType: 'WAIT_CHECK',
      statusArr: [],
      tableData: []
    }
  },
  computed: {
    orderTypeStr() {
      switch (this.orderTypeId) {
        case 1:
          return 'INSTALL'
        case 2:
          return 'PUBLISH'
        case 3:
          return 'UNPUBLISH'
        case 4:
          return 'CHECK'
        case 5:
          return 'REPAIR'
        case 6:
          return 'APPLYREPAIR'
        case 7:
          return 'REPLACE'
        case 8:
          return 'INTERMEDIATE_MONITORING'
        default:
          return ''
      }
    }
  },
  methods: {
    close() {
      this.tableData = []
      this.submitType = 'WAIT_CHECK'
      this.statusArr = []
      this.$emit('close')
    },
    init() {
      this.getStatusCount() // 获取每个类型统计数据
      this.$refs['table_' + this.submitType].search()
    },
    /**
     * 获取类型名称
     * @param typeId
     * @returns {string}
     */
    getTypeName(typeId) {
      switch (typeId) {
        case 1:
          return '新安装'
        case 2:
          return '上刊'
        case 3:
          return '下刊'
        case 4:
          return '巡检'
        case 5:
          return '维修'
        default:
          return ''
      }
    },
    getStatusLabel(type) {
      let str = ''
      let find = null
      switch (type) {
        case 'WAIT_CHECK': // 待审核
          str = '待审核'
          find = this.statusArr.find(item => item.statusEnum == 'WAIT_CHECK')
          if (find && find.statusCount > 0) {
            str += ('(' + find.statusCount + ')')
          }
          break
        case 'PASS': // 已通过
          str = '已通过'
          find = this.statusArr.find(item => item.statusEnum == 'PASS')
          if (find && find.statusCount > 0) {
            str += ('(' + find.statusCount + ')')
          }
          break
        case 'MULTI_SUBMIT': // 多次提交
          str = '多次提交'
          find = this.statusArr.find(item => item.statusEnum == 'MULTI_SUBMIT')
          if (find && find.statusCount > 0) {
            str += ('(' + find.statusCount + ')')
          }
          break
        case 'NOT_PASS': // 未通过
          str = '未通过'
          find = this.statusArr.find(item => item.statusEnum == 'NOT_PASS')
          if (find && find.statusCount > 0) {
            str += ('(' + find.statusCount + ')')
          }
          break
      }
      return str
    },
    getStatusCount() {
      status_count({ workOrderId: this.orderId }).then(res => {
        this.statusArr = res.data
      })
    },
    getList(listParams, changeParams) {
      this.getStatusCount()
      changeParams.tableLoading = true
      const req = Object.assign({ workOrderId: this.orderId }, listParams)
      check_list(req).then(res => {
        changeParams.tableLoading = false
        this.tableData = res.data.records
        changeParams.total = res.data.total
      })
    }
  },
  watch: {
    submitType(val, oldVal) {
      this.$refs['table_' + val].search()
      this.$refs['table_' + oldVal].resetListParams()
    }
  }
}
</script>

<style scoped>
.content {
  height: 100%;
}

.backtop {
  overflow-y: scroll;
  height: 100%;
}
</style>
